<template>
  <section class="chart-container">
    <div class="c_header systemManage">
      <div class="content">
        <div class="main-content">
          <div>
            <div class="cont">
              <div class="btn-group">
                <el-button type="primary" @click="addNewDaimaClick">增加同级代码</el-button>
                <el-button type="primary" @click="getDaimaInfoList(suplist.sup_code_id)" v-if="this.suplist.code_id!=''">向上</el-button>
                <span class="text">代码类型
                  <select v-model="nowDaimaTypeId">
                    <option value="">请选择</option>
                    <option v-for="item in daimaTypeList" :key="item.id" :value="item.hash.typeid">
                      {{item.hash.typename}}
                    </option>
                  </select>
                </span>
                <span>上级代码:{{this.suplist.code_id}} {{this.suplist.code_name}}</span>
              </div>
              <table width="95%" style="background:#fff">
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>代码</th>
                    <th>名称</th>
                    <th>备注</th>
                    <th>参数</th>
                    <th width="320px">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in daimaList" :key="item.id">
                    <td>{{index+1}}</td>
                    <td>{{item.hash.code_id}}</td>
                    <td>{{item.hash.code_name}}</td>
                    <td>{{item.hash.remark}}</td>
                    <td>{{item.hash.code_number}}</td>
                    <td>
                      <span @click="getDaimaInfoList(item.hash.code_id)">查看下级代码</span>
                      <span @click="modifyDaimaClick(item.hash.code_id)">修改</span>
                      <span @click="deleteDaima(item.hash.code_id)">删除</span>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="6" v-if="daimaList.length==0">暂无数据</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <el-dialog :visible.sync="dialogTableVisible3" width="60%" title="代码管理">
              <div class="addInfo">
                <div class="title">{{dmtitle}}</div>
                <table width="95%">
                  <tbody>
                    <tr>
                      <td>代码类别:</td>
                      <td>{{nowDaimaTypeId}}</td>
                    </tr>
                    <tr>
                      <td><b style="color:#f56c6c;margin-right:4px">*</b>代码参数:</td>
                      <td><input type="text" v-model="newDaimaNumber"></td>
                    </tr>
                    <tr>
                      <td>上级代码:</td>
                      <td v-if="this.suplist.code_name&&suplist.code_id"><input type="text" :value="this.suplist.code_id+'--'+this.suplist.code_name" disabled></td>
                      <td v-else><input type="text" value="暂无上级代码" readonly></td>
                    </tr>
                    <tr>
                      <td><b style="color:#f56c6c;margin-right:4px">*</b>代码:</td>
                      <td><input type="text" v-model="newDaimaId" :disabled="dmtitle=='修改代码'"></td>
                    </tr>
                    <tr>
                      <td><b style="color:#f56c6c;margin-right:4px">*</b>代码名称:</td>
                      <td><input type="text" v-model="newDaimaName"></td>
                    </tr>
                    <tr>
                      <td>备注:</td>
                      <td><input type="text" v-model="remark"></td>
                    </tr>
                    <tr>
                      <td colspan="2" @click="addNewDaimaSubmit"><span>提交</span></td>

                    </tr>
                  </tbody>
                </table>
              </div>
            </el-dialog>

          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      dialogTableVisible3: false,
      dialogTableVisible4: false,
      sideMenu: [],
      dmtitle: '新增代码',
      isRouterAlive: true,
      RoleRids: [],
      change: '用户列表',
      showTitle: '',
      remark: '',
      ts: this.newStore(),
      // 代码管理相关
      suplist: {
        code_id: '',
        code_name: '',
      },
      daimaList: [], // 代码信息列表
      daimaList1: [],
      daimaTypeList: [], // 代码类型列表
      oneDaimaInfo: [], // 单条代码信息
      nowDaimaTypeId: '', // 当前的代码类型id
      nowDaimaId: '', // 当前代码id
      oldDaimaId: '',
      listLen: 0, // 数据长度
      newDaimaId: '',
      newDaimaName: '',
      newDaimaNumber: '',
    };
  },
  created() {
    // this.getSidemenu();
    this.getDaimaTypeList();
  },
  watch: {
    // 切换不同的代码类型
    nowDaimaTypeId() {
      this.getDaimaInfoList('');
    },
  },
  methods: {
    getSidemenu() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B078C37EB4CBA2359',
        token: localStorage.getItem('token'),
        supid: '200300',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sideMenu = ts.d.data.operation1;
      });
    },
    // 代码管理
    // 点击增加同级代码按钮
    addNewDaimaClick() {
      this.dmtitle = '新增代码';
      this.dialogTableVisible3 = true;
      this.remark = '';
      this.newDaimaId = '';
      this.newDaimaName = '';
      this.newDaimaNumber = '';
      this.listLen = '1';
    },

    // 首级点击提交新增代码按钮
    addNewDaimaSubmit() {
      if (this.nowDaimaTypeId.length < 1) {
        alert('请选择代码类型！');
        return;
      }
      if (this.newDaimaId.length < 1) {
        alert('请输入代码！');
        return;
      }
      if (this.newDaimaId == '1') {
        alert('代码不能为 1 ！');
        return;
      }
      if (this.newDaimaNumber.length < 1) {
        alert('请输入参数！');
        return;
      }
      if (this.newDaimaName.length < 1) {
        alert('请输入代码名称！');
        return;
      }
      let req;
      if (this.listLen == '1') {
        req = {
          handle: '67A5B6FEF17D97DE8AD68148755261CA149212CB3AA81C34',
          token: localStorage.getItem('token'),
          codetype: this.nowDaimaTypeId,
          code_id: this.newDaimaId,
          sup_code_id: this.suplist.code_id,
          code_name: this.newDaimaName,
          code_number: this.newDaimaNumber,
          prop_a: '',
          remark: this.remark,
          '': 'ordernumber',
        };
      } else {
        req = {
          handle: '67A5B6FEF17D97DE0AB0D17168BEEBCD0737D7C4C3E47D60',
          token: localStorage.getItem('token'),
          codetype: this.nowDaimaTypeId,
          code_id: this.newDaimaId,
          sup_code_id: this.suplist.code_id,
          code_name: this.newDaimaName,
          code_number: this.newDaimaNumber,
          prop_a: '',
          remark: this.remark,
          '': 'ordernumber',
        };
      }
      this.spost(this.ts, '/mainservlet', req).then(() => {
        // alert('保存成功！');
        this.$message({
          type: 'success',
          message: '保存成功!',
        });
        this.getDaimaInfoList(this.suplist.code_id);
      });
      this.dialogTableVisible3 = false;
    },

    // 删除代码接口
    deleteDaima(codeId) {
      this.$confirm('确认删除?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const res = {
          handle: '67A5B6FEF17D97DEF1D0D23DA4270B63AA4B0A8ECC543C36',
          token: localStorage.getItem('token'),
          sup_code_id: this.suplist.code_id,
          code_id: codeId,
          codetype: this.nowDaimaTypeId,
        };
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.getDaimaInfoList(this.suplist.code_id);
          // this.getDaimaInfoList1();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    // 点击修改代码按钮
    modifyDaimaClick(codeId) {
      this.dmtitle = '修改代码';
      const req = {
        handle: '67A5B6FEF17D97DE41472B87C055439329C3784058E2FA6F',
        token: localStorage.getItem('token'),
        code_id: codeId,
        codetype: this.nowDaimaTypeId,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.oneDaimaInfo = ts.d.data.operation1;
        const item = this.oneDaimaInfo[0].hash;
        this.newDaimaId = item.code_id;
        this.remark = item.remark;
        this.newDaimaName = item.code_name;
        this.newDaimaNumber = item.code_number;
      });
      this.listLen = '0';
      this.dialogTableVisible3 = true;
    },


    // 获取代码类型列表
    getDaimaTypeList() {
      const req = {
        handle: '67A5B6FEF17D97DEADDD1AC49C9AAE0F8C5B6C756017CFB3F6486B1D96ED9F7E',
        token: localStorage.getItem('token'),
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.daimaTypeList = ts.d.data.operation1;
        this.nowDaimaTypeId = this.daimaTypeList[0].hash.typeid;
      });
    },

    // 获取代码信息列表
    getDaimaInfoList(supid) {
      // alert(this.suplist.sup_code_id);
      // if (!supid) {
      // supid = this.suplist.code_id;
      // }
      this.suplist.code_id = '';
      this.suplist.sup_code_id = '';
      this.suplist.code_name = '';
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid,
        codetype: this.nowDaimaTypeId,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.daimaList = ts.d.data.operation1;
        this.suplist = ts.d.data.operation2[0].hash;
        if (!this.suplist.code_id) {
          this.suplist.code_id = '';
          this.suplist.sup_code_id = '';
          this.suplist.code_name = '';
        }
        if (!this.daimaList[0].hash.code_id) {
          this.daimaList = [];
        }
      });
    },
  },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  table >>> .el-button--text
    color: #00f
    padding: 0 5px 0 0
    border-radius: 0
    border-right: 1px solid #999
  table >>> .el-message--success
    color: #00f
  // table >>> .el-button--text
  //   border-right: none;
  .show-role >>> .el-button
    padding: 5px 15px
  .show-role >>> .el-button--primary
    background: #69f
    border-color: #69f
  .systemManage
    width: 100%
    .content
      display: flex
      width: 100%
      min-height: 600px
      .sidebar
        flex: 0 0 200px
        width: 200px
        background: #F2F2F2
        border-right: 1px solid #ccc
        .main-title
          flex: 1
          width: 100%
          height: 44px
          line-height: 44px
          border-bottom: 2px solid #fff
          color: #13227A
          font-size: 0
          .iconfont
            display: inline-block
            margin-right: 15px
            font-size: 20px
            text-indent: 1em
          .text
            display: inline-block
            font-weight: 600
        .menu
          display: block
          width: 100%
          text-indent: 2em
          cursor: pointer
          background: #ffffff
          .title
            height: 48px
            line-height: 48px
            border-bottom: 1px solid #ccc
            padding-left: 10px
            &.choosed
              background #ccc
              color #333
      .main-content
        flex: 1
        min-height: 780px;
        .search_h
          height: 44px
          line-height: 44px
          padding-left: 20px
          background: #f2f2f2
          border-bottom: 2px solid #fff
          p
            float: left
            font-size: 16px
            a
              color: #69f
            span
              font-size: 14px
              padding-left: 15px
        .search_c
          width: 100%
          padding: 20px
          border-bottom: 1px solid #f1f1f1;
          .billlist
            margin-bottom: 30px
            span
              display: inline-block
              font-size: 14px
              width: 30%
              min-width: 100px
              &:first-child
                padding-left: 20px
              .selectC
                box-sizing: content-box
                width: 190px
                padding: 8px 5px
                border-radius: 2px
                box-shadow: 0 0 5px #ccc
                font-size: 14px
                color: #333
              input
                box-sizing: content-box
                width: 190px
                padding: 7px 5px
                margin-left: 5px
                border-radius: 2px
                border: 1px solid #ccc
                color: #333
          .search
            margin: 0 auto
            width: 80px
            height: 30px
            line-height: 30px
            text-align: center
            font-size: 14px
            background-color: #69f
            color: #fff
            border-radius: 5px
            font-weight: 400
            cursor: pointer
        .cont
          padding-left: 30px
          .btn-group
            margin: 10px 0
            .btn
              display: inline-block
              padding: 10px
              margin-right: 15px
              text-align: center
              font-size: 14px
              background-color: #69f
              color: #fff
              font-weight: 400
              cursor: pointer
            .text
               select
                    min-width: 100px
                    height: 30px
                    border: 1px solid #ccc
          table
            text-align: center
            padding-left: 30px
            cursor: pointer
            border-collapse: collapse
            td, th
              border: 1px solid #ccc
              font-size: 14px
              color: #666
              height: 40px
            thead
              th
                font-weight: 600
                background-color: #F2F2F2
            tbody
              td
                span
                  display: inline-block
                  vertical-align: middle
                  margin: 0 5px
                  padding-right: 5px
                  border-right: 1px solid #999
                  color: blue
                  &:last-child
                    border-right: none
          .pagination-wrapper
            height: 60px
            line-height: 60px
            text-align: center
            .desc
              margin-left: 50px
              display: inline-block
              font-size: 14px
              span
                color: #666
                i
                  padding: 0 3px
                  font-size: 16px
                  color: #25a4bb
        .addInfo
          padding: 0 30px
          .title
            padding: 15px 0
            font-size: 16px
            span
              color: #69f
              cursor: pointer
          table
            padding-left: 30px
            cursor: pointer
            border-collapse: collapse
            tbody
              tr
                td
                  border: 1px solid #ccc
                  font-size: 14px
                  color: #666
                  height: 40px
                  padding: 0 15px
                  &:nth-of-type(odd)
                    text-align: right
                  input:not([type="radio"]):not([type="checkbox"])
                    width: 300px
                    height: 30px
                    border: 1px solid #ccc
                  select
                    width: 200px
                    height: 30px
                    border: 1px solid #ccc
                  label
                    display: inline-block
                    padding: 0 15px 0 5px
                  checkbox
                    display: inline-block
                    vertical-align: top
                &:last-child
                  td
                    text-align: center
                    span
                      padding: 5px 15px
                      font-size: 14px
                      background-color: #69f
                      color: #fff
                      border-radius: 5px
                      font-weight: 400
                      cursor: pointer
        .show-role
          padding: 0 30px
          .title
            padding: 15px 0
            font-size: 16px
            span
              color: #69f
              cursor: pointer
          .list
            margin-bottom: 15px
            span
              margin-right: 15px
</style>
